import React from 'react';
import ReactDOM from 'react-dom';
import './style/index.css';
import App from './App';
import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';
import { matchPath } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { createStore } from 'redux';
import SentryRRWeb from '@sentry/rrweb';
const history = createBrowserHistory();
const routes = [{ path: '/about' }, { path: '/user/:id' }, { path: '/' }];
Sentry.init({
  dsn: "http://605005122316465f98d46485862ef27a@localhost:9000/2",
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.reactRouterV5Instrumentation(history, routes, matchPath),
    }),
    new SentryRRWeb({
      checkoutEveryNms: 10 * 1000, // 每10秒重新制作快照
      checkoutEveryNth: 200, // 每 200 个 event 重新制作快照
      maskAllInputs: false, // 将所有输入内容记录为 *
    })
  ],

  tracesSampleRate: 1.0,
});

const initialState = {
  a: 'init',
  b: 'init',
  c: 'init',
};

const rootReducer = (state = initialState, action) => {
  if (action.type === 'SET_A') {
    debugger
    return {
      ...state,
      a: 'a_changed',
    }
  }
  if (action.type === 'SET_B') {
    return {
      ...state,
      b: 'b_changed',
    }
  }
  if (action.type === 'SET_C') {
    return {
      ...state,
      c: 'c_changed',
    }
  }
  return state;
}

const sentryReduxEnhancer = Sentry.createReduxEnhancer({
  actionTransformer: action => {
    if (action.type === 'SET_B') {
      return null;
    }
    return action;
  },
  stateTransformer: state => {
    return {
      ...state,
      c: null,
    }
  },
});

export const store = createStore(
  rootReducer,
  sentryReduxEnhancer,
);

const WithSentryErrorBoundaryApp = () => {
  return (
    <Sentry.ErrorBoundary fallback={<div>error boundary error</div>} showDialog>
      <App />
    </Sentry.ErrorBoundary>
  );
}

ReactDOM.render(<WithSentryErrorBoundaryApp />,
  document.getElementById('root')
);
